<!-- DC：历史记录 -->
<template>
  <ToolbarItemContainer
    :iconFile="historyIcon"
    title="历史记录"
    :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'"
    :iconHeight="isUniFrameWork ? '26px' : '20px'"
    :needDialog="false"
    @onIconClick="onIconClick"
    ref="container"
  />

  <!-- 详情弹窗：查看 -->
  <ChatList ref="formRefDetail" />
</template>
<script setup lang="ts">
import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine'
import { ref } from '../../../../adapter-vue'
import ToolbarItemContainer from '../toolbar-item-container/index.vue'
import historyIcon from '@/TUIKit/assets/icon/message-search.svg'
import { isUniFrameWork } from '../../../../utils/env'
import ChatList from './ChatList.vue'

const currentConversation = ref<IConversationModel>()
const container = ref()

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation
  }
})

const genExtensionIcon = (extension: any) => {
  return extension?.icon
}

/** 打开详情 */
const formRefDetail = ref()
const onIconClick = () => {
  formRefDetail.value.open(10)
}
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
